import React, { Component } from 'react'
import './style.css'
export default class index extends Component {
  constructor() {
    super()
    this.state = {
      currentIndex: 0
    }
  }
  // 实现切换效果
  changeClickIndex(index){
    this.setState({
      currentIndex:index
    }) 
    this.props.tabClick(index)
  }
  render() {
    const { title } = this.props
    const { currentIndex } = this.state
    return (
      <div className='tab-control'>
        {
          title.map((item, index) => {
            return (
              <div className={`item ${index === currentIndex ? 'active' : ''}`} key={item} onClick={e=>this.changeClickIndex(index)}>
                <span className='text'>{item}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
}
